UI Development with Chakra UI Vue — Box

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Box

We can use the c-box component to add a flex container into our Vue app.

For instance, we can write:

<template>
  <c-box bg="tomato" w="100%" p="4" color="white"> This is the Box </c-box>
</template>

<script>
import { CBox } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
  },
};
</script>

to add a container with c-box .

bg is the background color.

w is the width.

p is the padding in pixels.

color is the content color.

We can use c-box to house other components.

For instance, we can write:

<template>
  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
    <c-image
      src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
    />
    <c-box d="flex" align-items="baseline">
      <c-badge rounded="full" px="2" variant-color="green"> New </c-badge>
      <c-box
        color="gray.500"
        font-weight="semibold"
        letter-spacing="wide"
        font-size="xs"
        text-transform="uppercase"
        ml="2"
      >
        2 beds &bull; 2 baths
      </c-box>
    </c-box>
  </c-box>
</template>

<script>
import { CBox, CBadge, CImage } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CBadge,
    CImage,
  },
};
</script>

to add an image with the c-image component inside.

And we have another c-box inside the outer one.

We make it a flex container with the d prop set to flex .

align-items set the align-items CSS property.

border-width sets the border width.

rounded adds border-radius.

maxW sets the max-width.

Conclusion

We can add a flex container into our Vue app with Chakra UI Vue.